<script lang="ts" setup>

    import type { RefSymbol } from '@vue/reactivity'
    import { ref,reactive,watch,watchEffect} from 'vue'
    //watch(value,()=>{},option)
    const name=ref("张三")
    const age=ref(18)
    // watch(name,(newValue,oldValue)=>{
    //     console.log(newValue,oldValue)
    // },{immediate:true})

    // const stopWatch=watch([name,age],(newValue,oldValue)=>{
    //     console.log(newValue,oldValue)
    //     if(newValue[1]>30){
    //         stopWatch()
    //     }
    // })

    function updateName(){
        name.value="王五"
    }
    function updateAge(){
        age.value++
    }

    const person=ref({
        name:"zs",
        age:23
    })
    //监视一个对象，实质是监制这个对象的地址
    // watch(person,(newValue,oldValue)=>{
    //     console.log(newValue,oldValue)
    // },{deep:true})//深度监视
    function updatePname(){
        person.value.name="赵六"
    }
    function updatePage(){
        person.value.age=18
    }
    function updatePerson(){
        person.value={
            name:"李华",
            age:21
        }
    }
    //只监视对象的某一个或者某几个属性
    //getter函数就是可以返回一个值的函数
    // watch([()=>person.value.name,()=>person.value.age],(newValue,oldValue)=>{
    //     console.log(newValue,oldValue)
    // })

    let person1=reactive({
        name:"Java",
        age:30
    })
    //111
    function updateP1name(){
        person1.name="赵六"
    }
    function updateP1age(){
        person1.age++
    }
    //修改reactive定义的整个对象之后，失去响应式
    function updatePerson1(){
        //总之，reactive定义的对象不能整体换成另一个对象

        // person1=reactive({
        //     name:"李华11",
        //     age:211
        // })

        // person1.name="李华11"
        // person1.age=211

        Object.assign(person1,{name:"李华11",age:211})
    }
    //对于reactive，默认开启deep
    // watch([()=>person1.name,()=>person1.age],(newValue,oldValue)=>{
    //     console.log(newValue,oldValue)
    // })

    //watchEffect
    watchEffect(()=>{
        console.log(age.value)
        console.log("person1 "+person1.age)
        if(age.value>30){
            console.log("hahahaha")
        }
        if(person1.age>35){
            console.log("Java行业变成路边一条")
        }
    })
</script>

<template>
    <h1>reactive的响应式对象</h1>
    <h1>{{ name }}--{{ age }}</h1>
    <button @click="updateName">修改名字</button>
    <button @click="updateAge">修改age</button>
    <h1>{{ person.name }}</h1>
    <h1>{{ person.age }}</h1>
    <button @click="updatePerson">修改人</button>
    <button @click="updatePname">修改name</button>
    <button @click="updatePage">修改age</button>
    <hr>
    <h1>{{ person1.name }}</h1>
    <h1>{{ person1.age }}</h1>
    <button @click="updatePerson1">修改人</button>
    <button @click="updateP1name">修改name</button>
    <button @click="updateP1age">修改age</button>
</template>

<style scoped>


</style>
